<template>
  <div>
    <div class="bgcUrl">
    <el-tabs type="card">
      <el-tab-pane label="经纪人列表"></el-tab-pane>
    </el-tabs>
      <el-card v-for="item in agentList" :key="item.id">
        <el-row>
          <el-col :span="12">
            <img :src="item.image" alt="" />
            <!-- <img src="@/assets/common/309110.jpg" alt="" /> -->
          </el-col>
          <el-col :span="6">
            <h1>经纪人</h1>
            <p>{{item.name}}</p>
            <el-divider></el-divider>
            <p>联系方式：{{item.phone}}</p>
            <el-divider></el-divider>
            <p>邮箱：{{item.email}}</p>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getAgent } from "@/api/agents";
export default {
  data() {
    return {
      agentList: [],
    };
  },
  async created() {
    const res = await getAgent({
      _limit: 100,
      _start: 0,
    });
    this.agentList = res.data;
    console.log(70, this.agentList);
  },
};
</script>

<style lang="scss" scoped>
.bgcUrl {
  // height: calc(100vh - 60px);
  background: url(~@/assets/common/2.0.jpg) no-repeat;
  background-attachment: fixed;
  // opacity: 0.8;
  background-size: 100% 100%;
}
.el-tabs {
  margin: 0 20%;
}
.el-card {
  width: 60%;
  margin: 15px auto;
  opacity: 0.8;
}
img {
  width: 300px;
}
</style>